<!-- FFU化滤 -->
<template>
  <div class="common_list_container">
    <!-- <div class="tabs">
      <CustomTabs :tabList="tabsOption" :activeName="activeName" @tabSelect="tabSelectHandler" />
    </div> -->
    <!-- <div ref="switchTabsContentRef"> -->
    <!-- <transition name="fab-tabs-fade" mode="out-in">
        <component :is="activeCom" :activeName="activeName" />
      </transition> -->
    <chemicalFilterLayout />
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import FFUChemicalLedger from "../FFUChemicalLedger/index.vue";
import chemicalFilterLayout from "../chemicalFilterLayout/index.vue";
import { ref, markRaw, computed, onMounted, onUnmounted } from "vue";
import { type OptionsType } from "@/components/ReSegmented";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

// const defaultHeight = ref<number>(800);

// const tabsOption = ref<Array<OptionsType>>([
//   {
//     name: "chemicalFilterLayout",
//     label: "化滤布置管理",
//     com: markRaw(chemicalFilterLayout)
//   }
//   {
//     name: "FFUChemicalLedger",
//     label: "FFU台账管理",
//     com: markRaw(FFUChemicalLedger)
//   }
// ]);

// const activeName = ref("chemicalFilterLayout");

// const switchTabsContentRef = ref(null);

// const activeCom = computed(() => tabsOption.value.find(item => item.name === activeName.value).com);
// const switchTabsChangeHandler = async () => await useUpdateDomHeight(defaultHeight, switchTabsContentRef, null, defaultHeight.value);

// const tabSelectHandler = async (selectName: string) => {
//   activeName.value = selectName;
//   await switchTabsChangeHandler();
// };

// onMounted(async () => {
//   await switchTabsChangeHandler();
// });

// onUnmounted(() => useCancelUpdateDomHeight());
</script>

<style lang="scss" scoped>
// .app-container {
//   padding: 0;

//   .tabs {
//     padding: 0 24px;
//   }

// .px-scrollbar {
//   .fab-tabs-fade-enter-active,
//   .fab-tabs-fade-leave-active {
//     transition: all 0.4s ease;
//   }

//   .fab-tabs-fade-enter-from {
//     opacity: 0;
//     transform: translateX(-80px);
//   }

//   .fab-tabs-fade-leave-to {
//     opacity: 0;
//     transform: translateX(80px);
//   }
// }
// }
.common_list_container {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .common_page {
    height: 33px;
    padding: 0 !important;
    margin-top: 25px;
    margin-bottom: 0;
  }
}

:deep(.px-table .px-table__header-wrapper th, .px-table .px-table__fixed-header-wrapper th) {
  font-size: 14px !important;
}
</style>
